<template>
<div class="profile-container">

    <div class="editFormation">
      <div class="formation">下面这些就是您的个人信息啦( つ•̀ω•́)つ</div>
      <div class="formation two">
        <div class="tx-box">
          <img  class="tx-box-img" :src="touX" alt="">
          <el-button  class="changeTouxiang"  size="mini" @click="changeTouxiang">更换头像</el-button>
        </div>
        <el-button class="btn" type="primary" @click="logout">退出登录</el-button>
      </div>
      <div class="formation">
        <span>昵称：</span><input v-model="name" placeholder="空空如也"></input>
      </div>
      <div class="formation">
        <span>签名：</span><input v-model="idiograph" placeholder="空空如也"></input>
      </div>
      <div class="formation">
        <el-button class="btn" @click="changeInformation">修改资料</el-button>
      </div>
    </div>

</div>
</template>

<script>
export default {
  data () {
    return{
      username: '',
      name: '',
      idiograph: '',
      touX: './touxiang/1.jpg',
    }
  },
  created() {
    this.name = sessionStorage.getItem('name') || ''
    if (sessionStorage.getItem('idiograph') == '' || sessionStorage.getItem('idiograph') == 'undefined') {
      this.idiograph = ''
    }else {
      this.idiograph = window.sessionStorage.getItem('idiograph')
    }
    if (sessionStorage.getItem('picture') == '' || sessionStorage.getItem('picture') == 'undefined') {
      this.touX = './touxiang/1.jpg'
    } else {
      this.touX = window.sessionStorage.getItem('picture')
      // this.touX = require(`${sessionStorage.getItem('picture')}`)
      // console.log(sessionStorage.getItem('picture'));
    }
    this.username = window.sessionStorage.getItem('username') || ''
  },
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$store.commit('cleanProfile')
      this.$router.push('/login')
    },
    async changeInformation () {
      if (this.name.trim() === ''){
        return this.$message.error({
          message: '昵称不能为空！',
          center: true
        })
      } else {
        const { data: res } = await this.$http.put('edit', {
          username: this.username,
          name: this.name,
          idiograph: this.idiograph,
        })
        if (res.status !== 200) {
          return this.$message.error({
            message: '修改资料失败！',
            center: true
          })
        } else {
          this.$message.success({
            message: '修改资料成功！',
            center: true
          })
          window.sessionStorage.setItem('idiograph',this.idiograph)
          window.sessionStorage.setItem('name',this.name)
        }
      }
    },
    async changeTouxiang () {
      const a = parseInt(Math.random() * 22 + 1)
      this.touX = `./touxiang/${a}.jpg`
      window.sessionStorage.setItem('picture',this.touX)
      const { data: res } = await this.$http.put('picture', {
        username: this.username,
        picture: this.touX
      })
      if (res.status !== 200) {
        return this.$message.error('修改头像失败！')
      } else {
      }
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
.profile-container{
  position: relative;
  .editFormation{
    width: 70%;
    position: absolute;
    top: 14vh;
    left: 15vw;
    padding: 2vw;

    .formation{
      display: flex;
      align-items: center;
      margin-bottom: 4vh;
      &:nth-child(1){
        color: orange;
        font-size: 2.0vh;
      }
      &:nth-child(2){
        align-items: flex-end;
      }
      .tx-box{
        .tx-box-img:hover{
          transform:rotate(720deg);
          -ms-transform:rotate(720deg); 	/* IE 9 */
          -moz-transform:rotate(720deg); 	/* Firefox */
          -webkit-transform:rotate(720deg); /* Safari 和 Chrome */
          -o-transform:rotate(720deg); 	/* Opera */
          transition: 0.7s ease;

        }
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .changeTouxiang{
          width: 80px;
          margin-top: 7px;
          height: 26px;
        }
      }
      img{
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
      }
      .btn{
        height: 3.6rem;
        margin-left: 3.4vw;
      }
      span{
        font-size: 1.7rem;
        color: deepskyblue;
      }
      input{
        width: 70% !important;
        border: 0px;
        height: 4rem;
        font-size: 2.0rem;
        background-color: rgba(255,255,255,0.4);
        color: blue;
        border-radius: 5px;
        padding-left: 10px;
      }
      input:focus{ outline: none; }
    }

  }
}
</style>
